﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" /> 
<meta name="description" content="jqxCalendar provides support for localizing its content and dates for different languages and date formats. 
Each localization is contained within its own file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. 
The desired localization file should be loaded along with the jqxcalendar.js. The localization is set to the jqxCalendar instance by setting the jqxCalendar's culture property."/>
<title id='Description'>
jqxCalendar provides support for localizing its content and dates for different languages and date formats. 
Each localization is contained within its own file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. 
The desired localization file should be loaded along with the jqxcalendar.js. The localization is set to the jqxCalendar instance by setting the jqxCalendar's culture property.
</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
 </head>
<body>
<div id='content'>
  <script type="text/javascript">
      $(document).ready(function () {
          var theme = getTheme();
          // define available cultures
          var availableCultures = ['Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)',
          'French (France)', 'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'
          ];
          // create a calendar.
          $("#jqxCalendar").jqxCalendar({ width: '250px', height: '250px', enableTooltips: false, theme: theme });
          // create a ComboBox
          $("#jqxDropDownList").jqxDropDownList({ source: availableCultures, theme: theme, selectedIndex: 3, width: '200px', height: '25px' });
          // set the culture.
          $("#jqxDropDownList").bind('select', function (event) {
              var index = event.args.index;
              switch (index) {
                  case 0:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.cs-CZ.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'cs-CZ' });
                      });
                      break;
                  case 1:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.de-DE.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'de-DE' });
                      });
                      break;
                  case 2:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.en-CA.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'en-CA' });
                      });
                      break;
                  case 3:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.en-US.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'en-US' });
                      });
                      break;
                  case 4:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.fr-FR.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'fr-FR' });
                      });
                      break;
                  case 5:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.it-IT.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'it-IT' });
                      });
                      break;
                  case 6:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.ja-JP.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'ja-JP' });
                      });
                      break;
                  case 7:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.he-IL.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'he-IL' });
                      });
                      break;
                  case 8:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.ru-RU.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'ru-RU' });
                      });
                      break;
                  case 9:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.hr.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'hr' });
                      });
                      break;
                  case 10:
                      $.getScript('../../jqwidgets/globalization/jquery.glob.sa-IN.js', function () {
                          $("#jqxCalendar").jqxCalendar({ culture: 'sa-IN' });
                      });
                      break;
              }
          });
      });
  </script>  
  <div style='float:left;' id='jqxWidget'>
    <div style='float: left; margin-right: 20px;' id='jqxCalendar'></div>
    <div style='float: left;'>
        <div style='float: left; font-family: "Verdana", "sans-serif"; font-size: 13px;'>Choose Culture</div>
        <br /> <br />
        <div style='float: left;' id='jqxDropDownList'></div>
    </div>
  </div>
</div>
</body>
</html>
